<template>
	<view class="" style="padding-bottom: 240rpx;">
		<view class="item-con" @click="navTo('/pages/cartBand/list')">
			<view class="item-title pad">品牌车型</view>
			<view class="item-input pad flex-row items-center justify-between">
				<view class="fill input" v-if="cartInfo.name">{{ cartInfo.name }} {{ cartInfo.name1 }} {{ cartInfo.name2 }}</view>
				<view class="fill input" v-else>请选择</view>
				<!-- <input class="fill  input" disabled type="text"  value="" placeholder="请选择" /> -->
				<u-icon name="arrow-right" size="24" color="#999999"></u-icon>
			</view>
		</view>
		<view class="item-con">
			<view class="item-title pad">车牌号码</view>
			<view class="item-input pad flex-row items-center justify-between" @click="showCarPicker = true">
				<view class="card-w">
					<text style="margin-right: 10rpx;">{{city}}</text>
					<u-icon name="arrow-down" size="21" color="#999"></u-icon>
				</view>
				<view class="fill"><input class="fill input" disabled v-model="license" style="padding-left:20rpx;" type="text" value="" placeholder="请输入" /></view>
			</view>
		</view>
		<view class="item-con">
			<view class="item-title pad">用车类型</view>
			<view class="item-input pad flex-row items-center justify-between" @click="show = true">
				<input class="fill  input" type="text" v-model="cartInfo.type" disabled value="" placeholder="请输入" />
				<u-icon name="arrow-right" size="24" color="#999999"></u-icon>
			</view>
		</view>
		<view class="item-con">
			<view class="item-title pad">续航里程</view>
			<view class="item-input pad flex-row items-center justify-between">
				<input class="fill  input" type="text" v-model="cartInfo.continuation" value="" placeholder="请输入" />
				<text style="color: #333333;">公里</text>
				<!-- <u-icon name="arrow-right" size="24" color="#999999"></u-icon> -->
			</view>
		</view>
		<view class="item-con">
			<view class="item-title pad">电池容量</view>
			<view class="item-input pad flex-row items-center justify-between">
				<input class="fill  input" type="text" v-model="cartInfo.batteryCapacity" value="" placeholder="请输入" />
				<text style="color: #333333;">千万时</text>
				<!-- <u-icon name="arrow-right" size="24" color="#999999"></u-icon> -->
			</view>
		</view>
		<view class="item-con flex-row items-center justify-between">
			<view class="item-title pad">设为常用车辆</view>
			<switch style="transform:scale(.7);" color="#246697" :checked="cartInfo.isDefult == 1" @change="change"></switch>
		</view>
		<view class="" style="background:#FFFFFF;">
			<view class="item-textarea">
				<view class="item-title pad">服务说明</view>
				<view class="" style="padding:0 20rpx 20rpx 20rpx;">{{ content }}</view>
			</view>
		</view>
		<view class="bottom-fixed flex-col items-center justify-center">
			<view class="btn" hover-class="hover-opacity" @click="submit">保存</view>
			<view class="bottom-text-line" @click="delCart(0)">删除爱车</view>
		</view>
		<mix-modal ref="mixModal" text="确定删除吗?" @onConfirm="delCart(1)"></mix-modal>
		<u-picker mode="selector" :range="cartUserTypeList" v-model="show" @confirm="userTypeConfirm"></u-picker>

		<u-popup mode="bottom" v-model="showCarPicker">
			<view class="flex-col justify-center fill" style="background: #FFFFFF;padding: 30rpx 0;">
				<u-message-input :dot-fill="false" :breathe="false" font-size="32" disabled-keyboard width="70" :value="value" :maxlength="maxlength"></u-message-input>
				<u-car-keyboard ref="uCarKeyboard" @change="valChange" @backspace="backspace"></u-car-keyboard>
				<view class="btn" style="margin: 30rpx auto;" hover-class="hover-opacity" @click="carPickerConfirm">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { checkStr } from '@/common/js/util.js';
export default {
	data() {
		return {
			maxlength: 8,
			showCarPicker: false,
			show: false,
			content: '',
			value: '',
			carNumber: [],
			city:"京",
			license:'',
			cartInfo: {
				uid:uni.getStorageSync('uid'),
				id: '',
				icon: '', //品牌图标
				name: '', //品牌名
				type: '', //用车类型直接传名字
				name1: '', //车系名
				name2: '', //车型名
				continuation: '', //续航
				batteryCapacity: '', //电池容量
				isDefult: '', //是否默认
				license: '' //车牌号
			}
		};
	},
	watch: {
		carNumber: {
			handler(newVal) {
				this.value = newVal.join('');
				this.license=this.value.replace(this.city,"");
				let flag = newVal == '' ? false : true;
				this.$refs.uCarKeyboard.initInputModel(flag);
			},
			deep: true
		}
	},
	onLoad(options) {
		
	},
	methods: {
		carPickerConfirm() {
			if (this.value == '') {
				this.$util.msg('请输入车牌号');
				return;
			} else {
				this.cartInfo.license = this.value;
				this.showCarPicker = false;
			}
		},
		valChange(val) {
			if (this.carNumber.length == this.maxlength) return;
			if (!checkStr(val, 'chinese') && this.value == '') return;
			if (val !="D" &&val!="F" && this.carNumber.length == 1) return;
			let index = checkStr(val, 'chinese') ? 0 : this.carNumber.length;
			this.$set(this.carNumber, index, val);
			index==0?this.city=val:'';
		},
		backspace() {
			if (this.value.length) this.carNumber = this.carNumber.splice(0, this.value.length - 1);
		},
		setCartItem(item) {
			console.log(item);
			this.cartInfo = Object.assign(this.cartInfo, item);
			console.log(this.cartInfo);
		},
		change(e) {
			e.detail.value ? (this.cartInfo.isDefult = 1) : (this.cartInfo.isDefult = 0);
		},
		userTypeConfirm(array) {
			let index = array[0];
			this.cartInfo.type = this.cartUserTypeList[index];
		},
		async submit() {
			const { name, name1, name2, type, continuation, batteryCapacity, license } = this.cartInfo;
			if (name == '') {
				this.$util.msg('请选择品牌名称!');
				return;
			}
			if (name1 == '') {
				this.$util.msg('请选择车系名称!');
				return;
			}
			if (name2 == '') {
				this.$util.msg('请选择车型名称!');
				return;
			}
			if (type == '') {
				this.$util.msg('请选择用车类型!');
				return;
			}
			if (continuation == '') {
				this.$util.msg('请输入续航!');
				return;
			}
			if (batteryCapacity == '') {
				this.$util.msg('请输入池容量!');
				return;
			}
			if (license == '') {
				this.$util.msg('请输入车牌号!');
				return;
			}
			const res = await this.$request('user/edit-car', this.cartInfo, { showLoading: true });
			if (res.result == 0) {
				this.$util.msg('提交成功!');
				this.back();
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async delCart(type) {
			if (type == 0) {
				this.$refs.mixModal.open();
			} else {
				const res = await this.$request('user/delete-car', { id: this.cartInfo.id }, { showLoading: true });
				if (res.result == 0) {
					this.$util.msg('提交成功!');
					this.back();
				} else {
					this.$util.msg(res.resultNote);
				}
			}
		},
		async getContent() {
			const res = await this.$request('content/text', { type: 0 });
			if (res.result == 0) {
				this.content = res.data.content;
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.bottom-fixed {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: #ffffff;
	height: 220rpx;
}
.bottom-text-line {
	font-size: 28rpx;
	// font-family: PingFang SC;
	font-weight: 500;
	text-decoration: underline;
	color: #fe642b;
	padding: 20rpx 0;
}
.card-w {
	// width: 100rpx;
	border-right: 1rpx solid #e7e7e7;
	padding-right: 20rpx;
}
.input {
	text-align: left;
}
.pad {
	padding: 0 20rpx;
}
.item-con {
	padding-bottom: 20rpx;
}
.item-title {
	height: 95rpx;
	line-height: 95rpx;
	font-weight: 500;
	color: #666666;
	font-size: 28rpx;
}
.item-input {
	height: 95rpx;
	background: #ffffff;
	/* border: 1px solid rgba(223, 223, 223, 0.26); */
}
.item-textarea {
	background: #ffffff;
	// padding: 20rpx;
}
.textarea {
	height: 246rpx;
	width: 100%;
	font-size: 26rpx;
	font-weight: 500;
	color: #999999;
}
.btn {
	width: 704rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #246697;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
}
</style>
